<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2021-12-21 09:52:54
 * @LastEditors: sueRimn
 * @LastEditTime: 2022-10-08 17:47:05
-->
<template>
  <div class="login">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="密  码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >登陆</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      ruleForm: {
        userName: "dlj",
        password: "dlj@123",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur,change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur,change" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.user
            .auth(this.$address.baseUrl, this.ruleForm)
            .then((res) => {
              if (res.status) {
                this.$store.dispatch("user/setToken", res.data.login_name);
                this.$store.dispatch("user/setUserInfo", res.data);
                // this.getMenuList();
                this.$router.push({ path: "/" });
              }
            })
            .catch((error) => {
              console.log("login error ", error);
            });
        }
      });
    },
    getMenuList() {
      this.$http.menu
        .getMenuList()
        .then((res) => {
          console.log("getMenuList res ", res);
          if (res.data.code == 0) {
            this.$store.dispatch(
              "menu/setMenuList",
              JSON.parse(res.data.menuList)
            );
          }
        })
        .catch((error) => {
          console.log("login error ", error);
        });
    },
  },
};
</script>
<style scoped>
.login {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  background-image: url(../assets/image/bg_login.jpg);
  /* background-size: cover; */
  background-repeat: no-repeat;
}
.demo-ruleForm {
  width: 300px;
  height: 200px;
  background-color: aliceblue;
  border: 1px solid gray;
  border-radius: 4px;
  margin-right: 70px;
  float: right;
  margin-top: 200px;
  padding-top: 40px;
  padding-right: 40px;
}
</style>